<template>
  <div id="container" class="map" style="height:800px">

  </div>
</template>
<script>

export default {
  data(){
    return{

    } 

  },
  methods:{
    init_map(){
      var map = new AMap.Map('container', {
        mapStyle: 'amap://styles/darkblue',
        center: [114.284702, 30.5],
        zoom: 11.5,
        features: ['bg', 'road'],
        skyColor: '#eee',
        pitch: 40,
        viewMode: '3D'
    });

    AMap.plugin([
    'AMap.ToolBar',
    'AMap.Scale',
    'AMap.OverView',
    'AMap.MapType',
    'AMap.Geolocation',
], function(){
    map.addControl(new AMap.ToolBar());
    map.addControl(new AMap.Scale());
    map.addControl(new AMap.OverView({isOpen:true}));
    map.addControl(new AMap.MapType());
    map.addControl(new AMap.Geolocation());
});

    $.get('https://a.amap.com/Loca/static/mock/sfcars.csv', function (csv) {
        var layer = new Loca.PointCloudLayer({
            map: map,
            fitView: false
        });

        layer.setData(csv, {
            lnglat: function (obj) {
                var value = obj.value;
                return [value['lng'], value['lat']];
            },
            type: 'csv'
        });

        layer.setOptions({
            style: {
                opacity: 0.8,
                radius: 0.9,
                color: 'rgba(42, 167, 184, 1)',
            }
        });


        layer.render();

        
    });
    },
    

  },

  created(){

  },
  mounted(){
    this.init_map()
  }
}

</script>

<style scoped>
  .a{
    background-color: rgb(39, 204, 94);
  }
</style>